<template>
  <div class="details">
    <div class="nav-top">
      <div class="left" @click="onClickLeft">&lt;</div>
      <div class="right">
        <img class="auto-img" src="../assets/lianjie.png" alt="" />
      </div>
    </div>

    <!-- 轮播图 -->
    <div class="box-lunbotu">
      <van-swipe class="my-swipe" indicator-color="white">
        <van-swipe-item v-for="(item, index) in detaislImgData" :key="index">
          <img class="auto-img" :src="item.img" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!--下边内容 -->
    <div class="detaisl-box">
      <div
        class="box-price"
        v-show="detailsHomeData.length != 0 ? true : false"
      >
        <div class="priced">&yen;{{ detailsHomeData.priceSale }}</div>
        <div class="pricex">
          <del>&yen;{{ detailsHomeData.priceMarket }}</del>
        </div>
      </div>

      <div class="box-title">{{ detailsHomeData.title }}</div>
      <div class="box-xiaotitle">{{ detailsHomeData.summary }}</div>
    </div>

    <div class="gonggao">
      <van-notice-bar left-icon="volume-o" :text="detailsgongzhi.msg" />
    </div>

    <div class="tanchukuang">
      <div class="chuxiao">
        <div class="gao-box">
          <div class="gao-box-title">领卷</div>
          <div class="zhijang">{{ detailslingjian[0] }}</div>
        </div>
      </div>
      <div class="chuxiao">
        <div class="gao-box">
          <div class="gao-box-title">促销</div>
          <div class="zhijang">{{ detailslijian.tag }}</div>
          <div class="dvi">{{ detailslijian.text }}</div>
        </div>
      </div>
      <div class="chuxiaos">
        <div class="gao-boxs">
          <div class="gao-box-title">规格</div>
          <div
            class="item-guige"
            v-for="(item, index) in gugeData"
            :key="index"
            :class="{ active: activeIndex === index }"
            @click="procurrentData(index)"
          >
            {{ item.ctitle }}
          </div>
        </div>
      </div>
      <div class="chuxiao">
        <div class="gao-box">
          <div class="gao-box-title">已选</div>
          <div class="dvidiv">
            <van-stepper
              theme="round"
              button-size="22"
              disable-input
              @plus="plusclick"
              @minus="minusclick"
            />
          </div>
        </div>
      </div>

      <div class="xiangqing">
        <div
          class="xiangqing-item"
          v-for="(item, index) in detailsmiaosu"
          :key="index"
        >
          <div class="item-imgs">
            <img class="auto-img" src="../assets/shouhou.png" alt="" />
          </div>
          <div class="wenzhi">{{ item.text }}</div>
        </div>
      </div>
    </div>

    <div>
      <div v-html="detaData"></div>
    </div>

    <div class="guigecanhsu">
      <div class="canshu">: 规格参数 :</div>
      <div class="get-shu">暂无规格参数</div>
    </div>

    <div class="problem">
      <div class="changjianwent">: 常见问题 :</div>
      <div class="problem-item" v-for="(v1, i1) in detailswenti" :key="i1">
        <div class="item-problem">
          <div class="problem-img">
            <img class="auto-img" src="../assets/wenhao.png" alt="" />
          </div>
          <div class="problem-title">{{ v1.question }}</div>
        </div>
        <div class="problem-huida">{{ v1.answer }}</div>
      </div>
    </div>

    <div>
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
        <van-goods-action-icon
          icon="cart-o"
          text="购物车"
          :badge="total"
          @click="clickSignin"
          color="#999"
        />
        <van-goods-action-icon
          icon="star"
          :text="isColor ? '已收藏' : '收藏'"
          @click="shouchang()"
          :color="isColor ? '#e4393c' : '#999'"
        />
        <van-goods-action-button
          type="warning"
          text="加入购物车"
          @click="appShopping"
        />
        <van-goods-action-button
          type="danger"
          text="立即购买"
          @click="clickGoumai"
        />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
import { getHeadData } from "../api/introduce";
export default {
  name: "Details",

  data() {
    return {
      activeIndex: 0,
      qq: 0,
      closeable: true,
      show: false,
      point: "point",
      // 详情商品数据
      detaislData: {},
      // 详情页轮播图
      detaislImgData: [],
      //详情首页信息
      detailsHomeData: [],
      // 通知
      detailsgongzhi: [],
      //促销立减
      detailslijian: [],
      // 领卷
      detailslingjian: [],
      //售后描述
      detailsmiaosu: [],
      //  详情
      detaData: "",
      // 问题
      detailswenti: [],
      // 收藏颜色
      isColor: false,

      count: 0,

      // 收藏
      shoucangData: [],

      // 登录状态
      dengluData: true,

      // 判断ID是否相等的值
      clickbtn: false,

      // 保存第一次点击进来的ID
      currentItemID: "",

      shouchengDataID: [],
      // 保存商品ID
      itemID: "",

      //规格
      gugeData: [],

      // 购物车商品数量
      total: 0,
    };
  },
  created() {
    this.itemID = this.$route.params.itemID;
    // 保存到本地
    this.clickData();

    // 赋值给商品ID
    this.DetItemID = this.itemID;
    // let itemIasD = "604190c9ad4cd55c578ec3c0"
    console.log("截取的itemID=>", this.itemID);
    getHeadData(this.point, this.itemID).then((data) => {
      console.log("data=>", data);
      this.detaislData = data;
      this.getDetaislData();
    });
    // 收藏
    // 获取本地存储的名称
    let getID = localStorage.getItem("bookID" + this.itemID);
    let getItemID = this.itemID;
    // console.log("thssssss=>", this.$route.params.itemID);

    if (getItemID === getID) {
      this.isColor = true;
    }

    // 加入购物车
    let bendiData = JSON.parse(localStorage.getItem("appCount"));

    // 商品数量
    
    this.total = bendiData.length;
    console.log("this.total=>", bendiData);
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    //点击分享
    clickfenxinng() {
      this.showShare = true;
    },

    //绑定商品选择
    procurrentData(index) {
      if (this.activeIndex === index) {
        return;
      }
      this.activeIndex = index;
    },

    // 返回上一级
    onClickLeft() {
      this.$router.back();
    },
    // 轮播图图片
    getDetaislData() {
      let attr = [];
      // console.log("this.detaislData=>",this.detaislData.data.itemInfo.imgContent);
      attr = this.detaislData.data.itemInfo.imgContent;
      // console.log("attr=>", attr);

      attr.forEach((item) => {
        this.detaislImgData.push({ img: item });
        // console.log("item=>",item);
      });
      this.detaislData.data.itemInfo.summary =
        this.detaislData.data.itemInfo.summary.replace(/<a .*>.*<\/a>/g, "");
      //首页数据
      this.detailsHomeData = this.detaislData.data.itemInfo;
      // 通知数据
      this.detailsgongzhi = this.detaislData.data.notice;
      //促销立减
      this.detailslijian = this.detaislData.data.promotion.current;
      //规格
      this.gugeData = this.detaislData.data.subItems;
      //领卷】、
      this.detailslingjian = this.detaislData.data.coupons;
      //
      let aaa = this.detaislData.data.itemInfo.itemServiceInfo;
      this.detailsmiaosu = aaa;
      // 详情
      this.detaData = this.detaislData.data.graphicDetail.content;
      // 问题
      this.detailswenti = this.detaislData.data.graphicDetail.questions;
      console.log("this.detailsmiaosu====>", this.detailswenti);
    },

    // 收藏切换
    shouchang() {
      let SignIn = localStorage.getItem("SigInID");
      console.log("SignIn=>", SignIn);
      if (SignIn == null) {
        this.$toast("未登录，请先登录");
        this.$router.push({ name: "SignIn" });
        return;
      }
      this.isColor = !this.isColor;
    },

    //收藏
    clickData() {
      // 获取本地数据
      let jiuData = JSON.parse(localStorage.getItem("bookID"));
      console.log(jiuData, "a");
      // 判断本地是否含有获取不等于0
      if (jiuData && jiuData.length != 0) {
        // 遍历
        jiuData.forEach((item) => {
          // 判断本地ID是否等于传进来的ID
          if (item.ItemID == this.itemID) {
            // 让搜藏状态等于本地状态
            this.isColor = item.chebox;
          } else {
            // 否则返回现在的状态
            this.isColor;
          }
        });
      } else {
        this.isColor;
      }
    },

    // 添加购物车
    appShopping() {
      let SignIn = localStorage.getItem("SigInID");
      console.log("SignIn=>", SignIn);
      if (SignIn == null) {
        this.$toast("未登录，请先登录");
        this.$router.push({ name: "SignIn" });
        return;
      }

      // //获取商品
      let bendiData = localStorage.getItem("appCount");

      if (!bendiData) {
        bendiData = [];
      } else {
        bendiData = JSON.parse(bendiData);
      }
      console.log(" this.detaislData.data=->", this.detaislData.data);
      let data = this.detaislData.data;

      bendiData.push({
        iscount: this.count + 1,
        countID: this.itemID,
        img: data.itemInfo.imgContent[0],
        currentPrice: data.itemInfo.priceSale,
        isPrice: data.itemInfo.priceMarket,
        name: data.itemInfo.title,
        type: data.subItems[0].ctitle,
        Time: new Date().getTime(),
        chebox: false,
        ischebox: this.isColor,
        isqitian:"七天无理由退货",
        ishuanhuo:"15天换货",
        isguanfang:"官方发货"
      });
      // console.log("jiosjiofjiosjfs=>", bendiData);

      for (let i = 0; i < bendiData.length; i++) {
        for (let j = i + 1; j < bendiData.length; j++) {
          if (bendiData[i].countID === bendiData[j].countID) {
            bendiData[i].iscount += bendiData[j].iscount;
            bendiData.splice(j, 1);
          }
        }
      }
      // console.log("bendiData=>", bendiData);
      this.$toast("添加购物车成功");

      // 商品数量
      this.total = bendiData.length;
      window.localStorage.setItem("appCount", JSON.stringify(bendiData));
    },



    
    // 步进器加
    plusclick() {
      this.count += 1;
    },
    //步进器减
    minusclick() {
      this.count -= 1;
    },

    // 购物车跳转
    clickSignin() {
      let SignIn = localStorage.getItem("SigInID");
      console.log("SignIn=>", SignIn);
      if (SignIn == null) {
        this.$toast("未登录，请先登录");
        this.$router.push({ name: "SignIn" });
      } else {
        this.$router.push({ name: "Shoppingson" });
      }
    },

    // 立即购买
    clickGoumai() {
      let SignIn = localStorage.getItem("SigInID");
      console.log("SignIn=>", SignIn);
      if (SignIn == null) {
        this.$toast("未登录，请先登录");
        this.$router.push({ name: "SignIn" });
        return;
      }
        // 判断是否有选中商品
        this.$toast.loading({
          message: "加载中...",
          forbidClick: true,
          loadingType: "spinner",
        });
        setTimeout(() => {
          this.$router.push({ name: "Dingdan" });
        }, 1000);
      }
    
  },

  // 退出存储到本地
  beforeDestroy() {
    // console.log(this.itemID);
    // 定义个对象，保存状态和ID
    let strID = {
      ItemID: this.itemID,
      chebox: this.isColor,
    };

    // 拿到本地数据的数组
    let jiuData = JSON.parse(localStorage.getItem("bookID"));
    if (jiuData && jiuData.length != 0) {
      // 把现在的新数据添加到旧数据中
      jiuData.push(strID);
      // 去重
      for (let i = 0; i < jiuData.length; i++) {
        for (let j = i + 1; j < jiuData.length; j++) {
          if (jiuData[i].ItemID === jiuData[j].ItemID) {
            jiuData.splice(j, 1);
          }
        }
      }
      // 判断是否ID相等
      jiuData.forEach((item) => {
        // console.log(item);
        if (item.ItemID == this.itemID) {
          item.chebox = this.isColor;
        } else {
          jiuData.chebox;
        }
      });

      window.localStorage.setItem("bookID", JSON.stringify(jiuData));
    } else {
      // this.isColor = !this.isColor;
      window.localStorage.setItem("bookID", JSON.stringify([strID]));
    }
  },
};
</script>

<style lang="scss" scoped>
.chuxiaos {
  .gao-boxs {
    display: flex;
    flex-wrap: wrap;
    .gao-box-title {
      width: 60px;
      font-size: 16px;
      font-weight: bold;
      text-align: center;
      line-height: 45px;
    }
  }
}
.item-guige {
  line-height: 10px;
  height: 20px;
  // background-color: #a3a6b1;
  margin-right: 10px;
  padding: 3px;
  margin-top: 12px;
  border-radius: 10px;
  padding:  5px 10px;
  box-sizing: border-box;
  background-color: #eeeeee;
  border: 1px solid #eeeeee;
  &.active {
    background-color: white;
    color: red;
    border: 1px solid red;
    box-sizing: border-box;
  }
}
.tanchukuang {
  width: 100%;
}
.details {
  width: 100%;

  .guigecanhsu {
    box-sizing: border-box;
    border-bottom: 1px solid #d1d2d5;
    background: #f5f5f5;
    .canshu {
      width: 100%;
      text-align: center;
      // padding: 5px;
    }
    .get-shu {
      padding: 10px;
    }
  }
  .problem {
    .changjianwent {
      width: 100%;
      text-align: center;
      border-bottom: 1px solid rgb(211, 211, 211);
      // padding: 8px;
    }
    .item-problem {
      display: flex;
    }
    .problem-huida {
      padding-left: 20px;
      color: #a3a6b1;
      margin-top: 10px;
      margin-bottom: 10px;
    }
    .problem-item {
      padding: 20px;
      border-bottom: 1px solid rgb(208, 205, 205);
    }
    padding: 10px;
    .problem-img {
      width: 16px;
      height: 16px;
      margin: 0 5px;
    }
  }
  background-color: white;
  .xiangqing-item {
    display: flex;
    flex-wrap: wrap;
    margin-left: 10px;
  }
  .item-imgs {
    width: 12px;
    height: 12px;
    margin: 3px;
  }
  .xiangqing {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
  }
  .wenzhi {
    font-size: 12px;
    color: #a3a6b1;
  }
  .dvidiv {
    margin-left: auto;
    margin-right: 10px;
  }
  .chuxiao {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid rgb(212, 212, 212);
    .gao-box {
      line-height: 50px;
      display: flex;
      .gao-box-title {
        width: 60px;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
      }
      .zhijang {
        color: #e4393c;
        margin: 0 5px;
      }
      .dvi {
        margin: 0 5px;
      }
    }
  }
  .content {
    padding: 16px 16px 160px;
  }
  .box-title {
    font-size: 16px;
    margin: 10px 0;
  }
  .box-xiaotitle {
    color: #b6aca6;
  }
  .box-price {
    display: flex;
    .priced {
      font-size: 20px;
      color: #e4393c;
      font-weight: bold;
    }
    .pricex {
      color: #b6aca6;
      margin-top: 8px;
      margin-left: 4px;
    }
  }
  .box-lunbotu {
    height: 375px;
  }
  .detaisl-box {
    padding: 10px;
    background-color: white;
  }
  .nav-top {
    z-index: 99;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    .right {
      margin-left: auto;
      width: 16px;
      height: 16px;
      position: relative;
      margin-top: 10px;
      padding: 7px;
      font-size: 16px;
      border-radius: 50%;
      color: white;
      background-color: #acacac;
      text-align: center;
      margin-right: 10px;
    }

    .left {
      margin-top: 10px;
      width: 16px;
      height: 16px;
      padding: 7px;
      font-size: 16px;
      font-family: "宋体";
      font-weight: bold;
      border-radius: 50%;
      color: white;
      background-color: #acacac;
      text-align: center;
      margin-left: 10px;
    }
  }

  .details-nav-rigit {
    width: 16px;
    height: 16px;
    padding: 5px;
    border-radius: 50%;
    background-color: #acacac;
  }
}
</style>